<template>
  <div class="Register">
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="email">
            <el-input type="text" placeholder="email" v-model="ruleForm2.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
            <el-input type="password" placeholder="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
            <el-input type="password" placeholder="checkPassword" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="id">
            <el-input v-model="ruleForm2.id" placeholder="teacherId" :minlength="6"></el-input>
        </el-form-item>
    </el-form>
    <label class="registerError">{{ Message }}</label>
    <div class="btn" @click="Register">Register</div>
  </div>
</template>

<script>
import axios from "axios";
import { serverAddress } from "../js/config";
export default {
    name:'Register',
    data() {
        var validateID = (rule, value, callback) => {
            const reg = /^\d+$/; // 正则表达式，验证输入是否为数字
            if (value === '') {
                callback(new Error('编号不能为空'));
            } else if (!reg.test(value)) {
                callback(new Error('编号只能包含数字'));
            } else if (value.length < 6) {
                callback(new Error('编号长度不能少于6位'));
            } else {
                callback();
            }
        };
        var validateEmail = (rule, value, callback) => {
            const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; 
            if (value === '') {
                callback(new Error('邮箱不能为空'));
            } else if (!emailReg.test(value)) {
                callback(new Error('请输入有效的邮箱格式'));
            } else {
                callback();
            }
        };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        Message:'',
        ruleForm2: {
          pass: '',
          checkPass: '',
          id: '',
          email:'',
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          id: [
            { validator: validateID, trigger: 'blur' }
          ],
          email: [
            { validator: validateEmail, trigger: 'blur' }
            ]
        }
      };
    },
    methods:{
      Register(){ 
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          let formObj = {
            teacherEmail: this.ruleForm2.email,
            teacherPwd: this.ruleForm2.pass,
            teacherId:this.ruleForm2.id,
          };
          console.log(formObj);
          axios({
            url:`${serverAddress}/login/teacher`,
            /* url: "https://mock.apifox.com/m1/3662090-0-default/register", */
            method: "POST",
            data: formObj,
          }).then((response) => {
            if (response.data.code === 1) {
              console.log(response.data);
              this.Message='注册成功，请返回登录确认'
            } else {
              console.log(response.data);
              this.Message = "注册失败，请重新确认信息";
              setTimeout(() => {
                this.Message = "";
              }, 5000);
            }
          });
        } else {
          this.Message = "请按要求输入正确信息";
          setTimeout(() => {
            this.Message = "";
          }, 5000);
        }
      });
    },
  },
}
</script>

<style scoped>
.el-form-item::v-deep .el-input__inner {
  width: 250px;
  display: block;
  border: 0;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
  background-color: rgb(240, 244, 248);
}
.el-form {
  padding: 14px;
  width: 350px;
  height: 300px;
  position: absolute;
  top: 55%;
  left: 38%;
  transform: translate(-52%, -65%);
}
.btn {
    text-align: center;
    padding: 10px;
    border-radius: 23px;
    font-weight: 700;
    font-size:17px;
    margin: 0 auto;
    width: 73%;
    margin-top: 300px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    color: #fff;
    transform: translate(0%, 110%); 
}
.registerError {
  width:200px;
  height:20px;
  position: absolute;
  top: 270px;
  left: 200px;
  transform: translate(-55%, 200%);
  font-size: 15px;
  color: rgb(234, 116, 116);
}
</style>